// Copyright (c) 2016 Chef Software Inc. and/or applicable contributors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.hab-org-members {
  margin-bottom: $small-spacing;
  position: relative;

  .members>li {
    @include outer-container;
    padding: rem(12) 0;
    border-bottom: 1px solid $light-gray;

    .hab-gravatar {
      @include span-columns(1);
      height: 16px;
      margin-left: rem(5);
      margin-top: rem(5);
      width: 16px;
    }

    .username {
      @include span-columns(3);
      font-weight: bold;
      padding-left: $small-spacing;
    }

    .name {
      @include span-columns(4);
    }

    .status {
      @include span-columns(3);
      color: $medium-gray;
    }

    .actions {
      @extend .hab-drop-down;
      @include span-columns(1);
      @include omega;
      float: right;

    }
  }

  .results {
    @include dropdown-panel;
    left: 0;
    position: absolute;
    width: 100%;
    top: 100;
    z-index: 20;

    &>li {
      color: $light-gray;
      position: relative;
      padding: $small-spacing;

      &.addable {
        color: inherit;

        &:hover {
          background-color: $hab-blue-light;
          cursor: pointer;
        }
      }


      .grav {
        float: left;
        padding-right: $small-spacing;
        padding-top: rem(3);
      }

      .username {
        font-weight: bold;
      }

      .info {
        margin: 0;
      }

      .indicator {
        position: absolute;
        right: rem(10);
        top: rem(8);
        img {
          vertical-align: middle;
        }
      }
    }
  }
}
